<template>
  <div id="picture-add-page">
    <h1>批量上传图片</h1>
    <a-typography v-if="spaceId">
      <a-typography-text>保存到图片空间：</a-typography-text>
      <a-typography-link :href="`/space/my`">
        {{ spaceId }}
      </a-typography-link>
    </a-typography>

    <a-divider />
    <div class="clearfix">
      <a-upload
        v-model:file-list="fileList"
        :before-upload="beforeUpload"
        :max-count="5"
        list-type="picture-card"
        :custom-request="handleUpload"
        @preview="handlePreview"
      >
        <div v-if="fileList?.length < 30">
          <plus-outlined />
          <div style="margin: 8px auto">上传文件</div>
        </div>
      </a-upload>
      <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%; object-fit: cover" :src="previewImage" />
      </a-modal>
    </div>
    <a-divider />
    <a-button type="primary" @click="router.push('/')">返回主页</a-button>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { savePictureUsingPost } from '@/api/pictureController.ts'
import { useRoute } from 'vue-router'

import { PlusOutlined } from '@ant-design/icons-vue'
import { message, type UploadProps } from 'ant-design-vue'
import router from '@/router'

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}

const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')

const fileList = ref<UploadProps['fileList']>([])
const route = useRoute()

const spaceId = computed(() => {
  return route.query.spaceId
})

const loading = ref(false)
const handleUpload = async ({ file }: any) => {
  loading.value = true
  try {
    const res = await savePictureUsingPost(
      {
        spaceId: spaceId.value,
      },
      {},
      file,
    )
    if (res.data.code === 0 && res.data.data) {
      // 移除上一个元素
      fileList.value?.pop()
      fileList.value?.push({
        uid: res.data.data.id,
        name: res.data.data.name,
        status: 'done',
        url: res.data.data.url,
      })
    }
  } catch (error) {
    console.log(error.message)
  }
  loading.value = false
  console.log(fileList.value)
}

const beforeUpload = (file: UploadProps['fileList'][number]) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只能上传格式为jpeg，和png')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不超过2MB')
  }
  return isJpgOrPng && isLt2M
}

const handleCancel = () => {
  previewVisible.value = false
  previewTitle.value = ''
}
const handlePreview = async (file: UploadProps['fileList'][number]) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string
  }
  previewImage.value = file.url || file.preview
  previewVisible.value = true
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
}

onMounted(() => {})
</script>

<style scoped lang="scss">
#picture-add-page {
  width: 100%;
  max-width: 600px;
  min-height: 70vh;
  margin: 40px auto 0 auto;
  padding: 32px 0 24px 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(24, 144, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

h1 {
  text-align: center;
  color: #1890ff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.ant-typography {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  font-size: 16px;
}

.ant-typography-link {
  margin-left: 8px;
  font-size: 16px;
}

.clearfix {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  flex: 1;
}

:deep(.ant-upload) {
  width: 100% !important;
  height: 240px !important;
  border-radius: 16px !important;
  background: #f5faff !important;
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.06);
  border: 1.5px dashed #91d5ff !important;
  transition: box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.ant-upload:hover) {
  box-shadow: 0 4px 24px rgba(24, 144, 255, 0.13);
  border-color: #1890ff !important;
}
:deep(.ant-upload-list-picture-card-container) {
  border-radius: 12px;
}
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
  border-radius: 12px;
}
:deep(.ant-upload-list-picture-card .ant-upload-list-item:hover) {
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.13);
}

:deep(.ant-upload-select-picture-card) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  i {
    font-size: 38px;
    color: #1890ff;
  }
  .ant-upload-text {
    margin-top: 8px;
    color: #666;
    font-size: 15px;
  }
}

:deep(.ant-modal) {
  .ant-modal-content {
    border-radius: 16px;
    padding: 0 0 16px 0;
  }
  .ant-modal-body {
    background: #fafdff;
    border-radius: 0 0 16px 16px;
    padding: 0;
  }
}

:deep(.ant-modal-title) {
  text-align: center;
  font-size: 18px;
  color: #1890ff;
  font-weight: 600;
}

:deep(.ant-modal-body img) {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.08);
}

.a-divider {
  margin: 18px 0;
}

.a-button,
.ant-btn {
  display: block;
  margin: 0 auto 0 auto;
  min-width: 120px;
  font-size: 16px;
  border-radius: 8px;
  height: 40px;
}

.a-button + .a-button,
.ant-btn + .ant-btn {
  margin-top: 16px;
}

@media (max-width: 768px) {
  #picture-add-page {
    min-height: 60vh;
    padding: 16px 0 12px 0;
  }
  :deep(.ant-upload) {
    width: 90vw !important;
    max-width: 320px !important;
    height: 180px !important;
  }
}
</style>
